<template>
  <!-- table区域-begin -->
  <div>
    <vxe-grid
      style="width: 100%;"
      :height="320"
      size="mini"
      align="center"
      highlight-hover-row
      stripe
      row-key
      row-id="selectedRowKeys"
      column-min-width="150"
      id="id"
      keep-source
      :loading="loading"
      border
      resizable
      showOverflow
      showHeaderOverflow
      :pager-config="tablePage"
      ref="xGrid"
      :row-config="{ useKey: true,keyField: 'id',isCurrent:true,isHover:true}"
      :checkbox-config="{
          checkRowKeys:selectedRowKeys,
          trigger: 'row',
          highlight: true,
          reserve: true}"
      @sort-change="sortChange"
      @checkbox-change="checkboxChangeEvent"
      @checkbox-all="checkboxChangeEvent"
      :data="dataSource"
      :columns="columns"
      @page-change="handlePageChange"
    >
      <template v-slot:top>
        <!-- 操作按钮区域 -->
        <div class="table-operator" v-if="(selectObj.id && !disabled)">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        </div>
      </template>
      <template v-slot:operate="{ row }">
        <a-button v-if="!disabled" type="primary" shape="circle" @click="handleEdit(row)" icon="edit"/>
        <a-button v-else type="primary" shape="circle" @click="handleEdit(row)" icon="edit" disabled/>
        <a-divider type="vertical" v-if="!disabled"/>
        <a-dropdown v-if="!disabled">
          <a-button type="primary" shape="circle" class="ant-dropdown-link" icon="setting"/>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleDelete(row.id)">删除</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleDetail(row)">详情</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
      <template v-slot:empty>
        <a-empty/>
      </template>
    </vxe-grid>
    <wms-outbound-detail-modal :selectObj="selectObj" ref="modalForm" @ok="modalFormOk"></wms-outbound-detail-modal>
  </div>
  <!-- table区域-end -->
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { HYListMixin } from '@/mixins/HYListMixin'
  import WmsOutboundDetailModal from './modules/WmsOutboundDetailModal'
  import {getAction} from "@api/manage";

  export default {
    name: 'WmsOutboundDetailList',
    mixins:[HYListMixin, mixinDevice],
    components: {
      WmsOutboundDetailModal
    },
    data () {
      return {
        description: '出库配置明细管理页面',
        selectObj: {},
        disabled: false,
        disableMixinCreated: true,
        // 表头
        columns: [
          {type: "seq", width: 50, align: "center"},//序号
          {title: '序号', align: "center", field: 'sorter'},
          {title: '起点', align: "center", field: 'source'},
          {title: '终点', align: "center", field: 'target'},
          {title: '设备名', align: "center", field: 'deviceName'},
          {title: '操作', fixed: 'right', width: 105, slots: {default: 'operate'}}
        ],
        url: {
          list: "/wcs/wcsOutboundDetail/list",
          delete: "/wcs/wcsOutboundDetail/delete",
          deleteBatch: "/wcs/wcsOutboundDetail/deleteBatch",
          exportXlsUrl: "/wcs/wcsOutboundDetail/exportXls",
          importExcelUrl: "wcs/wcsOutboundDetail/importExcel",
        },
        dictOptions:{},
        superFieldList:[],
      }
    },
    created() {
      this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      showDetail(selectObj, disabled) {
        if (!selectObj) {
          return;
        }
        this.selectObj = selectObj;
        this.disabled = disabled;
        getAction(this.url.list, {
          outboundId: selectObj.id,
          pageNo: this.tablePage.currentPage,
          pageSize: this.tablePage.pageSize
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.tablePage.total = res.result.total;
            this.modalFormOk();
          } else {
            this.dataSource = null;
          }
        })
      },
      loadData() {
        getAction(this.url.list, {
          outboundId: this.selectObj.id,
          pageNo: this.tablePage.currentPage,
          pageSize: this.tablePage.pageSize
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.tablePage.total = res.result.total;
          } else {
            this.dataSource = null;
          }
        })
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'int',value:'sorter',text:'序号',dictCode:''})
        fieldList.push({type:'string',value:'source',text:'起点',dictCode:''})
        fieldList.push({type:'string',value:'target',text:'终点',dictCode:''})
        fieldList.push({type:'int',value:'deviceName',text:'设备名',dictCode:''})
        this.superFieldList = fieldList
      }
    }
  }
</script>
